<template>
  <view class="privacy-popup" v-if="visible">
    <view class="popup-content">
      <!-- 标题 -->
      <view class="popup-title">隐私政策</view>

      <!-- 内容 -->
      <view class="popup-body">
        <view class="policy-text">
          请在使用前仔细阅读
          <text class="link" @click="handlelook(1)">《用户协议》</text>
          和
          <text class="link" @click="handlelook(2)">《隐私政策》</text>
          ，并理解相关条款。我们会通过《隐私政策》帮助您了解我们如何收集、使用和储存个人信息，以及您享有的相关权利。
        </view>
      </view>

      <!-- 按钮区域 -->
      <view class="popup-buttons">
        <button class="agree-btn" @click="handleAgree">同意并进入</button>
        <button class="reject-btn" @click="handleReject">拒绝</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "PrivacyPopup",
  data() {
    return {
      visible: false,
    };
  },
  mounted() {
    console.log("隐私政策组件已挂载");
    const agreed = uni.getStorageSync("privacyAgreed");
    console.log(agreed);
    if (!agreed || agreed == "false") {
      uni.hideTabBar();
      this.visible = true;
    } else {
      uni.showTabBar();
    }
  },
  methods: {
    handlelook(val) {
      // 点击查看隐私协议时隐藏弹框，返回后根据状态决定是否重新显示
      uni.navigateTo({
        url: "/pages/public/richtext?id=" + val,
        success: () => {
          // 导航成功后隐藏弹框
          // this.visible = false;
          uni.setStorageSync("privacyAgreed", "false");
          console.log("跳转到隐私协议页面，隐藏弹框");
        },
        fail: (err) => {
          console.error("跳转失败:", err);
        },
      });
    },
    // 显示弹窗
    show() {
      console.log("显示隐私政策弹窗");
      this.visible = true;
    },

    // 隐藏弹窗
    hide() {
      console.log("隐藏隐私政策弹窗");
      this.visible = false;
    },

    // 同意处理
    handleAgree() {
      console.log("用户同意隐私政策");
      // 保存用户同意状态
      uni.setStorageSync("privacyAgreed", "true");
      this.hide();
      this.$emit("agreed", true);
	  uni.showTabBar();
      // 触发首页数据加载
      this.$emit("loadHomeData", 1);
    },

    // 拒绝处理
    handleReject() {
      console.log("用户拒绝隐私政策");
      // 保存用户拒绝状态
      uni.setStorageSync("privacyAgreed", "false");
      this.hide();
      this.$emit("agreed", false);

      // 显示退出提示
      uni.showModal({
        title: "提示",
        content:
          "您需要同意隐私政策才能使用本应用。如果您不同意，将无法使用我们的产品和服务。",
        confirmText: "退出应用",
        cancelText: "重新查看",
        success: (res) => {
          if (res.confirm) {
            // 退出应用
            // #ifdef APP-PLUS
            plus.runtime.quit();
            // #endif
            // #ifdef H5
            window.close();
            // #endif
          } else {
            // 重新显示隐私政策
            setTimeout(() => {
              this.show();
            }, 300);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.privacy-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.popup-content {
  background: #fff;
  width: 100%;
  border-radius: 20px 20px 0 0;
  padding: 30px 20px 40px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.popup-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.popup-body {
  margin-bottom: 30px;
}

.policy-text {
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  text-align: justify;
}

.policy-text .link {
  color: #007aff;
  // text-decoration: underline;
}

.popup-buttons {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.agree-btn {
  width: 100%;
  height: 50px;
  background: #007aff;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  line-height: 50px;
  &:active {
    background: #0056b3;
  }
}

.reject-btn {
  width: 100%;
  height: 50px;
  background: transparent;
  color: #666;
  border: none;
  font-size: 15px;
  line-height: 50px;

  &:active {
    color: #333;
  }
}
/* 通过覆盖层遮挡TabBar区域 */
.privacy-popup + .uni-tabbar {
  display: none !important;
}
/* 适配暗黑模式 */
@media (prefers-color-scheme: dark) {
  .popup-content {
    background: #333;
  }

  .popup-title {
    color: #fff;
  }

  .policy-text {
    color: #ccc;
  }

  .reject-btn {
    color: #ccc;

    &:active {
      color: #fff;
    }
  }
}
</style>
